<template>
	<view class="salcont">
		<!--  v-for="(item,index) in list[index]"-->
		<view class="sal_item" v-if="start==1">
			<view class="_item_tit">
				<!-- {{list[idx].title}} -->
				{{idx+1}}.{{title}}
			</view>
			<u-radio-group :wrap="true" v-model="value" @change="radioGroupChange()" class="redred">
				<!--  :disabled="item.disabled" -->
				<u-radio class="radio" label-size="24rpx" v-for="(item,index) in swersData" :key="index"
					:name="item.content" @change="radioChange(index)">
					{{item.content}}
				</u-radio>
			</u-radio-group>
		</view>
		<view class="sal_item" v-else>
			<!-- <view class="tishicont"> -->
			<view class="title">温馨提示</view>
			<view class="cont">尊敬的客户：
				<br>
				您好！为了给您提供更优质的服务，请您花费几分钟的时间，如实选择以下调查问卷题目选项，本表可协助评估您对策略选择及投资目标相关风险的态度，确定您对投资风险的适应力，进而为您推荐更适合的产品。衷心感谢您对搜量网的支持与信任。
				重要提示：
				<br>
				1、请投资者认真阅读问卷内容，并确认所填写内容表达真实。
				<br>
				2、本平台根据用户的风险承受能力等级，对用户的投资行为作出是否匹配的检查和提示。本次调查结果不构成对用户的投资建议，或对用户的投资决策形成实质影响
				<br>
				3、投资有风险，可能导致投资者产生亏损，请用户在选择策略产品中注意根据调查结果核对自己的风险承受能力和策略风险匹配情况。无论用户是否根据调查结果进行投资，均属用户的独立行为，相应的风险亦由投资者独立承担。
				<br>
				4、本问卷共设计了{{allnum}}道问题，用户得分越高，说明用户的风险承受能力越强。
			</view>
			<!-- </view> -->
		</view>
		<view class="btn_cont">
			<view class="btn_box">
				<u-button v-if="idx==0" type="primary" shape="circle" size="medium" @click="gobtnFn"
					:custom-style="customStyle">返回</u-button>
				<u-button v-if="start==0" type="primary" shape="circle" size="medium" @click="startFn"
					:custom-style="customStyle">开始答题</u-button>
				<u-button v-if="idx>=1&&start==1" type="primary" shape="circle" size="medium" @click="fistFn"
					:custom-style="customStyle">上一题</u-button>
				<u-button v-if="allnum==idx+1" type="primary" shape="circle" size="medium" @click="tiFn"
					:custom-style="customStyle">提交结果</u-button>
				<u-button v-if="allnum!=idx+1&&start==1" type="primary" shape="circle" size="medium" @click="salbtnFn"
					:custom-style="customStyle">下一题</u-button>
			</view>
		</view>
		<!-- 	<u-popup width="80%" v-model="isshow" mode="center" border-radius="14" :closeable="true">
				
		</u-popup> -->
		<!-- <u-toast ref="uToast" /> -->
	</view>
</template>

<script>
	import {
		checkTopic,
		checkevaluat
	} from '@/api/default.js'
	export default {
		data() {
			return {
				list: [],
				isshow: true,
				swersData: [],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '',
				title: '',
				customStyle: {
					marginTop: '20px',
					// margin:'auto'
				},
				alltit: [], //记录每个选择
				id: '',
				allnum: '', //提总数目
				idx: 0, //当前提目
				nember: 0, //记录分数
				titnum: 0, //记录每次选择
				numlength: 1, //记录页数
				start: 0,
			}
		},
		onLoad() {},
		mounted() {
			checkTopic().then(res => {
				this.allnum = res.data.length
				this.list = res.data
				this.swersData = this.list[0].checkTopicAnswers
				this.title = this.list[0].title
				// this.list=res.data
				// this.allnum=res.data[0].number
			})
		},
		methods: {
			startFn() {
				this.start = 1
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				let data = {
					num: e,
					name: this.swersData[e].content
				}
				this.titnum = e
				// let length =this.alltit.length
				if (this.idx == this.numlength) {
					this.alltit[this.idx] = data
				} else {
					this.alltit.push(data)
				}

				let num = this.alltit.length

				if (num < this.allnum) {
					this.idx += 1
					this.numlength = this.idx
					this.swersData = this.list[this.idx].checkTopicAnswers
					this.title = this.list[this.idx].title
					// this.id=''
					if (this.idx < num) {
						this.value = this.alltit[this.idx].name
					}
				}
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				this.id = e
				// this.alltit.push(e) 
			},
			tiFn() {
				let {
					id
				} = uni.getStorageSync('MEMBER_INFO')
				let Nem = this.alltit.length
				for (let i = 0; i < Nem; i++) {
					let {
						num
					} = this.alltit[i]
					this.nember += this.list[i].checkTopicAnswers[num].grade
				}
				checkevaluat({
					id: id,
					grade: this.nember
				}).then(res => {
					if (res.code == 200) {
						uni.setStorageSync('appraisal_key', this.nember)
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						let member=uni.getStorageSync("userinfo_key");
						member.assess_status=1;
						member.assess_grade=this.nember;
						uni.setStorageSync("userinfo_key",member);
						// this.$refs.uToast.show({
						// 	title: res.data.msg,
						// 	type: 'success',
						// 	url: '/pages/user/appraisal/appraisal'
						// 	})
						uni.navigateBack()
					}
				})
			},
			fistFn() {
				this.idx -= 1
				this.numlength = this.idx
				this.swersData = this.list[this.idx].checkTopicAnswers
				this.title = this.list[this.idx].title
				this.value = this.alltit[this.idx].name
			},
			salbtnFn() {
				let num = this.alltit.length
				if (num < this.idx + 1) {
					uni.showToast({
						title: '请选择',
						icon: 'none'
					})
				} else {
					this.idx += 1
					this.numlength = this.idx
					this.swersData = this.list[this.idx].checkTopicAnswers
					this.title = this.list[this.idx].title
					// this.id=''
					if (this.idx < num) {
						this.value = this.alltit[this.idx].name
					}
					// this.nember+=this.titnum				
				}
			},
			gobtnFn() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 16px;
		font-weight: bold;
		margin: 0 0 10px;
		text-align: center;
	}

	.salcont {
		width: 100%;
		height: 100vh;
		background-image: url("https://sou-liang.oss-cn-shanghai.aliyuncs.com/weixin/images/ping.png");
		background-size: 100% 100%;
		padding: 20px 0;

		.sal_item {
			width: 92%;
			background-color: #FFFFFF;
			border-radius: 5px;
			margin-top: 90px;
			margin: auto;
			padding: 10px 25px 30px;
			line-height: 40rpx;

			._item_tit {
				font-size: 16px;
				margin: 20px 0;
			}

			.radio {
				line-height: 40rpx;

				.u-radio {
					line-height: 40rpx;
				}
			}
		}

		.btn_cont {
			width: 100%;
			position: fixed;
			bottom: 40px;

			.btn_box {
				width: 80%;
				display: flex;
				justify-content: space-between;
				text-align: center;
				margin: 0 auto;
			}
		}

		/deep/ .u-radio {
			padding-bottom: 25rpx;
		}

	}
</style>
